<template>
  <a-row class="formButtonGroup" style="margin-bottom: 16px">
    <a-col :span="12">
      <a-space>
        <a-button v-if="config.includes('add')" type="primary" size="small" @click="tapNew">
          <template #icon>
            <icon-plus />
          </template>
          新建
        </a-button>
        <a-button
          v-if="config.includes('update')"
          type="primary"
          status="success"
          :disabled="disableUpdate"
          size="small"
          @click="tapUpdate"
        >
          <template #icon>
            <icon-plus />
          </template>
          修改
        </a-button>
        <a-button v-if="config.includes('del')" type="primary" status="danger" :disabled="disableDel" size="small" @click="tapDel">
          <template #icon>
            <icon-plus />
          </template>
          删除
        </a-button>
        <a-upload v-if="config.includes('Download')" action="/">
          <template #upload-button>
            <a-button> 下载 </a-button>
          </template>
        </a-upload>
        <a-button v-if="config.includes('fold')" :disabled="disableDel" size="small" @click="tapFold">
          <template #icon>
            <icon-swap :rotate="90" />
          </template>
          展开/折叠
        </a-button>
        <a-button v-if="config.includes('derive')" type="primary" status="warning">
          <template #icon>
            <icon-download />
          </template>
          导入
        </a-button>
        <!-- 左插槽 -->
        <slot name="leftboon"></slot>
      </a-space>
    </a-col>
    <a-col :span="12" style="display: flex; align-items: center; justify-content: end">
      <!-- 右插槽 -->
      <slot name="rightboon"></slot>
    </a-col>
  </a-row>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './formButtonGroup';
export default {
  props: {
    // table 中的类字段
    columns: {
      default: null,
      type: Object,
      required: true,
    },
    // 控制table的大小
    size: {
      default: 'medium',
      type: String,
      required: true,
    },
    // 配置表 默认值为 [add(控制添加),Download(控制下载),derive(控制导入)]
    config: {
      default: [],
      type: Array<string>,
      required: false,
    },
    disableUpdate: {
      type: Boolean,
      default: true,
    },
    disableDel: {
      type: Boolean,
      default: true,
    },
    searchBar: {
      type: String,
      default: '',
    },
  },
  /**
   * @exports update:columns 更新 v-model:columns
   * @exports update:size    更新 update:size
   * @exports refresh        数据刷新操作
   * @exports tapNew         数据新建操作
   */
  emits: ['update:columns', 'update:size', 'refresh', 'changeSearchBar', 'tapNew', 'tapUpdate', 'tapDel', 'tapFold'],
  setup(props, emits) {
    const { densityList, base, handleSelectDensity, init, handleChange, refresh, changeSearchBar, tapNew, tapUpdate, tapDel, tapFold } =
      importConfig(props, emits);
    init();
    return {
      densityList,
      ...toRefs(base),
      handleSelectDensity,
      handleChange,
      refresh,
      changeSearchBar,
      tapNew,
      tapUpdate,
      tapDel,
      tapFold,
    };
  },
};
</script>

<style lang="less" scoped>
:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
.action-icon {
  margin-left: 12px;
  cursor: pointer;
}
.active {
  color: #0960bd;
  background-color: #e3f4fc;
}
.setting {
  display: flex;
  align-items: center;
  width: 200px;
}
.formButtonGroup {
  :deep(.arco-space) {
    display: flex;
  }
}

:deep(.nav-btn) {
  margin-left: 12px;
  border-color: rgb(var(--gray-2));
  color: rgb(var(--gray-8));
}
</style>
